<!--分类页-->
<template>
	<div class="type">
		<header-components></header-components>
		<div class="main">
			<nav-components></nav-components>
			<div class="type-content">
				<p>
					<router-link to="Pro_list">
						<img src="~imgs/pro_7.gif"/>
					</router-link>
				</p>
				<div class="pro-type" v-for="i in type" :key="i.id">
					<span v-text="i.title"></span>
					<ul>
						<li v-for="j in i.hot">
							<router-link to="Pro_list">
								<img :src="j.img_src"/>
								<em v-text="j.test"></em>
							</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<tabbar></tabbar>
	</div>
</template>

<script>
	import Header from "./components/Header"
	import Nav from "@/pages/public/Nav"
	import Main from '@/pages/main/Main'
	import axios from 'axios'
	export default {
		components:{
		  "nav-components":Nav,
		  "header-components":Header,
		  "tabbar":Main
		},
		mounted(){
			var that = this;
			axios.get("/api/type.json").
			then(res => {
				that.type = res.data.data.type;
			})
		},
		data(){
			return {
				type:[],
				type_content:[]
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.type
		overflow-x: hidden;
		padding-bottom: 1.2rem;
		position: absolute;
		width: 100%;
		.type-content
			float: left;
			margin-left: 0.32rem;
			p
				margin: 0.38rem 0;
				img
					width: 4.26rem;
					height: 2.3rem;
			.pro-type
				overflow: hidden;
				width: 4.26rem;
				span
					display: block;
					width: 1.84rem;
					background: url("~imgs/pro_line.gif")no-repeat center;
					background-size: 1.84rem 0.02rem;
					text-align: center;
					font-size: 0.24rem;
					color: #515151;
				ul
					overflow: hidden;
					margin-top: 0.2rem;
					width: 4.26rem;
					display: flex;
					flex-flow: wrap;
					justify-content: space-around;
					li
						float: left;
						width: 2.02rem;
						text-align: center;
						
						img
							width: 2.02rem;
							height: 1.66rem;
						em
							font-size: 0.24rem;
							color: #515151;
</style>